<template>
  <div>
    <header-toobar>
      <a-button style="margin-left: 8px" size="small" type="primary" icon="user-add" @click="() =>{this.addLabel()}">
        创建标签
      </a-button>
      <a-button style="margin-left: 8px;" size="small" type="primary" icon="edit" @click="() =>{this.editLabel()}">编辑
      </a-button>
      <a-button style="margin-left: 8px" size="small" type="danger" icon="delete" @click="() =>{this.deleteLabel()}">删除
      </a-button>
    </header-toobar>
    <zh-card title="查询条件" style="margin-top:15px">
      <zh-form ref="labelFrom" :model="queryLabelParam">
        <zh-input prop="title" label="标签名称" placeholder="支持模糊查询" v-model="queryLabelParam.title"></zh-input>
        <zh-input prop="labelType" label="标签类型" type="select" :options="dictData.LABELTYPE"
          v-model="queryLabelParam.labelType"></zh-input>
        <template v-if="advanced">
          <zh-input prop="status" label="有效状态" type="select" :options="dictData.STATUS"
            v-model="queryLabelParam.status"></zh-input>
          <zh-input prop="remarks" label="备注" v-model="queryLabelParam.remarks"></zh-input>
        </template>
        <zh-form-query v-model="advanced" @queryClick="queryBtn"></zh-form-query>
      </zh-form>
    </zh-card>
    <zh-table :shadow="true" ref="labelListTable" title="查询结果" :url="tableUrl" :columns="labelColumn"
      @radio-change="radioChangeEvent" :loading="labelLoading" :disabled="false" style="margin-top:20px">
      <template #status_edit="{ row }">
        <zh-input type="switch" :formflag="false" v-model="row.status" @change="onStatusChange(row)"
          checked-children="启用" un-checked-children="禁用"></zh-input>
      </template>
    </zh-table>
    <a-modal :title="modalTitle" centered style="top: 10px;" width="50%" destroyOnClose v-model="visible"
      @ok="saveLabel" @cancel="cancelModal" cancelText="关闭" okText="保存">
      <label-edit-form ref="labelPage" :labelInfo="selectRow" />
    </a-modal>
  </div>
</template>

<script>
import { getDictLabelList, getBatchDict, addLabel, editLabel, deleteLabel } from "@/services/system/api"
import HeaderToobar from '@/components/HeaderToobar'
import LabelEditForm from '@/pages/system/form/LabelEditForm'
import modal from 'ant-design-vue/es/modal'
export default {
  name: 'LabelManager',
  components: {
    HeaderToobar,
    LabelEditForm
  },
  data () {
    return {
      description: '标签管理',
      // 高级搜索 展开/关闭
      advanced: false,
      dictData: [],
      // 标签查询条件
      queryLabelParam: {},
      tableUrl: getDictLabelList,
      labelLoading: false,
      modalTitle: false,
      visible: false,
      // 角色授权
      roleVisible: false,
      selectRow: null,
      labelCode: null,
      labelColumn: [
        {
          type: 'radio', width: 40, fixed: 'left', align: 'center', slots: {
            header: () => {
              return [<a-tooltip placement="top" title="取消选择">
                <a-icon type="stop" theme="twoTone" onClick={this.clearRadioRowEevnt} />
              </a-tooltip>]
            }
          }
        },
        { type: 'seq', minWidth: 50, align: 'center', title: '序号' },
        { field: 'title', title: '标签名称', align: 'center', minWidth: 100 },
        {
          field: 'status', title: '状态', align: 'center', editRender: {}, slots: {
            // 使用插槽模板渲染
            default: 'status_edit'
          }, width: 80
        }, { field: 'labelTypeName', title: '标签类型', align: 'center', minWidth: 100 },
        { field: 'remarks', title: '备注', align: 'center', showOverflow: true, minWidth: 350 }
      ]
    }
  },
  created () {
    const params = {}
    params.dictFields = 'LABELTYPE,STATUS'
    this.$http.post(getBatchDict, params).then(res => {
      this.dictData = res.result
    })
    // 初始化数据
    this.$nextTick(() => {
      this.queryBtn()
    })
  },
  methods: {
    queryBtn () {
      this.findLabelList()
    },
    findLabelList () {
      this.$refs.labelListTable.query(this.queryLabelParam)
    },
    onStatusChange (row) {
      let params = {}
      params = row
      setTimeout(() => {
        this.$http.post(editLabel, params).then(() => {
          modal.info({title: '成功提示', content:'修改成功'})
        }).catch(() => {
        })
      }, 200)
    },
    radioChangeEvent ({ row }) {
      this.labelCode = row.labelCode
      this.selectRow = row
    },
    clearRadioRowEevnt () {
      this.selectRow = null
      this.$refs.labelListTable.clearRadioRow()
    },
    addLabel () {
      this.clearRadioRowEevnt()
      this.modalTitle = '新增标签'
      this.visible = true
    },
    editLabel () {
      if (this.selectRow) {
        this.modalTitle = '修改标签信息'
        this.visible = true
      } else {
        modal.warn({ title: '提示', content: '请先选择需要修改的数据' })
      }
    },
    deleteLabel () {
      if (this.selectRow) {
        const params = {}
        params.labelCode = this.selectRow.labelCode
        setTimeout(() => {
          this.$http.post(deleteLabel, params).then(() => {
            modal.info({ title: '成功提示', content: '删除标签成功' })
            this.findLabelList()
          }).catch(() => {
          })
        }, 100)
      } else {
        modal.warn({ title: '提示', content: '请先选择需要删除的数据' })
      }
    },
    saveLabel () {
      // console.log(this.$refs.labelPage.checkForm());
      const labelPage = this.$refs.labelPage;
      if (labelPage.checkForm()) {
        if (labelPage.form.labelCode) {
          let params = labelPage.form;
          this.$http.post(editLabel, params).then(() => {
            modal.success({ title: '成功提示', content: '修改成功' });
            this.visible = false;
            this.findLabelList()
          }).catch(() => {
          })
        } else {
          let params = labelPage.form;
          this.$http.post(addLabel, params).then(() => {
            modal.success({ title: '成功提示', content: '新增成功' });
            this.visible = false;
            this.findLabelList()
          }).catch(() => {
          })
        }

      } else {
        modal.warn({ title: '错误提示', content: '请输入必填项' });
      }
    },
    cancelModal () {

    },
  }
}
</script>
<style lang="less" scoped>
</style>
